/**
 * @file 轮播组件
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2022/11/06
 */
import { Area, Color, Input, Link, Mapping, Radio, Select, Slider, Switch } from '@/components/CustomPage/fields/widget'
import { BasicOption } from './basicops'
import { DataOption } from './dataops'
import SwipeList from '../widget/SwipeList'
import BannerStyleOne from '@/components/CustomPage/apps/widget/banner/styleone'
import Types from '@/components/CustomPage/workflow/common/types'
import BannerStyleTwo from '@/components/CustomPage/apps/widget/banner/styletwo'
import swiper4page from '@/components/CustomPage/apps/widget/banner/swiper4page'
import { DataOption4Img } from '@/components/CustomPage/apps/map/dataops4img'
import { imgOption } from '@/components/CustomPage/apps/map/imgops'
import { swiperOption } from '@/components/CustomPage/apps/map/swiperOps'
import { moreLinkOps } from './moreLinkops'

export default {
  /**
     * 列表轮播组件
     */
  SwipeList() {
    return {
      target: SwipeList,
      parameter: {
        relate: false,
        mold: 'field',
        label: '视频课程列表轮播',
        value: []
      },
      option: [
        {
          title: '基础配置', fields: [
            ...BasicOption(),
            { type: Input, option: { label: '标题名称', name: 'title', required: true }},
            
            { type: Slider, option: { label: '下间距', name: 'bottom', value: 0, max: 100, step: 1 }},
            { type: Slider, option: { label: '左右间距', name: 'spacing', value: 0, max: 100, step: 1 }},
            { type: Slider, option: { label: '圆角大小', name: 'radiusSize', value: 20, max: 45, step: 1 }},
            { type: Slider, option: { label: '图片圆角大小', name: 'imgRadiusSize', value: 16, max: 100, step: 1 }},
            { type: Slider, option: { label: '图片高度', name: 'itemHeight', value: 120, max: 200, step: 1 }},
            { type: Color, option: { label: '背景颜色', name: 'backgroundColor', value: '#fff', showalpha: true }},
            { type: Slider, option: { label: '每列展示数量', name: 'pageSize', value: 3, max: 10, min: 2, step: 1 }},
            { type: Slider, option: { label: '列数', name: 'column', value: 3, max: 10, min: 2, step: 1 }},
            {
              type: Radio, option: {
                label: '来源', name: 'origin', required: true, visible: true, value: 1, list: [
                  { name: '按本单位课程分类添加', value: 1 },
                  { name: '输入本单位标签添加', value: 2 },
                  { name: '按平台课程分类添加', value: 3 },
                  { name: '输入平台标签添加', value: 4 }
                ],
                override: function(ths, e) {
                  // 12 13 14 15
                  ths.$nextTick(() => {
                    const arr = [12, 13, 14, 15]
                    arr.forEach(item => {
                      ths.$parent.$parent.$children[item].visible = (e + 1 === item - 10)
                    })
                  })
                }
              }
            },
            {
              type: Area, option: {
                label: '选择本单位课程分类',
                required: true,
                name: 'classify4company',
                value: '',
                async: 'backend/learnClassify/getClassifyTree',
                asyncParams: { classifyType: 'JNZQFL01', status: 'ZT01', isAppVisit: 1 },
                props: {
                  children: 'children',
                  label: 'classifyName',
                  value: 'id',
                  checkStrictly: true
                }
              }
            },
            {
              type: Input,
              option: {
                label: '输入本单位标签',
                name: 'label4company',
                placeholder: '多个以半角状态下,分隔',
                required: true
              }
            },
            {
              type: Area, option: {
                label: '选择平台课程分类',
                required: true,
                name: 'classify4platform',
                value: '',
                async: 'backend/learnClassify/getPTClassifyTree',
                asyncParams: { classifyType: 'JNZQFL01', status: 'ZT01', isAppVisit: 1 },
                props: {
                  children: 'children',
                  label: 'classifyName',
                  checkStrictly: true
                }
              }
            },
            {
              type: Input,
              option: {
                label: '输入平台标签',
                name: 'label4platform',
                placeholder: '多个以半角状态下,分隔',
                required: true
              }
            },
            { type: Link, option: { label: '详情地址', name: 'link' }},
            // {
            //   type: Radio, option: {
            //     label: '查看更多展示', name: 'isMore', type: 'button', list: [
            //       { name: '展示', value: '1' },
            //       { name: '不展示', value: '2' }
            //     ],
            //     layout: 'horizon',
            //     value: '1',
            //     override: function(ths, e) {
            //       // 11 12 13 14
            //       ths.$nextTick(() => {
            //         const lastIndex = ths.$parent.$parent.$children.length - 1
            //         ths.$parent.$parent.$children[lastIndex].visible = e === '1'
            //       })
            //     }
            //   }
            // },
            // { type: Link, option: { label: '查看更多地址', name: 'moreLink' }}
            ...moreLinkOps(),
          ]
        },
        ...DataOption()
      ]
    }
  },
  /**
     * 左右留白轮播1
     * @constructor
     */
  bannerstyleone() {
    return {
      target: BannerStyleOne,
      parameter: {
        relate: true,
        mold: 'field',
        label: '左右留白轮播1'
      },
      option: [
        {
          title: '基础配置', fields: [
            ...BasicOption(),
            { type: Slider, option: { label: '高度', name: 'height', value: 350, max: 600, step: 10 }},
            { type: Slider, option: { label: '左右间距', name: 'paddingLeftRight', value: 0, max: 50, step: 1 }},
            { type: Slider, option: { label: '圆角大小', name: 'radiusSize', value: 12, max: 100, step: 1 }},

            ...imgOption(),
            ...swiperOption(),
            {
              type: Mapping,
              option: {
                label: '',
                name: 'mapping',
                list: [
                  { name: '图片地址', code: 'carouselImgUrl', value: '' },
                  { name: '图片id', code: 'carouselImg', value: '' }
                ]
              }
            }
          ]
        },
        ...DataOption4Img('dataList', [])
      ],
      valueType: Types.VALUETYPES.STRING
    }
  },
  /**
     *通栏轮播
     * @constructor
     */
  bannerstyletwo() {
    return {
      target: BannerStyleTwo,
      parameter: {
        relate: false,
        mold: 'field',
        label: '通栏轮播'
      },
      option: [
        {
          title: '基础配置', fields: [
            ...BasicOption(),
            { type: Slider, option: { label: '高度', name: 'height', value: 350, max: 600, step: 10 }},
            ...imgOption(),
            ...swiperOption(),
            {
              type: Mapping,
              option: {
                label: '',
                name: 'mapping',
                list: [
                  { name: '图片地址', code: 'carouselImgUrl', value: '' },
                  { name: '图片id', code: 'carouselImg', value: '' }
                ]
              }
            }
          ]
        },
        ...DataOption4Img('dataList', [])
      ]
    }
  },
  /**
     * 轮播组件-左右留白轮播2
     * @constructor
     */
  swiper4page() {
    return {
      target: swiper4page,
      parameter: {
        relate: true,
        mold: 'field',
        label: '左右留白轮播2'
      },
      option: [
        {
          title: '基础配置', fields: [

            ...BasicOption(),
            ...imgOption(),
            ...swiperOption(),
            {
              type: Radio, option: {
                label: '是否循环', name: 'loop', list: [
                  { name: '是', value: true },
                  { name: '否', value: false }
                ],
                value: true
              }
            },
            {
              type: Slider,
              option: { label: '图片高度', name: 'imgHeight', value: 340, max: 500, min: 1, step: 1 }
            },
            { type: Slider, option: { label: '展示数量', name: 'number', value: 1, max: 30, min: 1, step: 1 }},
            {
              type: Mapping, option: {
                label: '', name: 'mapping',
                list: [
                  { name: '封面', code: 'imgId', value: '' },
                  { name: 'oss封面', code: 'imgUrl', value: '' }
                ]
              }
            }
          ]
        },
        ...DataOption4Img('dataList', [])
      ]
    }
  }
}

